<script setup>
import { ref, onMounted } from "vue";

let viewer = null;
let plotLayer = null;
let measureLayer = null;
let selectPlotLayer = null;
let selectPlot = null;

console.log(CesiumPlot);
const btnlist = ref([
  {
    name: "折线", id: CesiumPlot.SymbolType.POLYLINE,  imgUrl: "images/polyline.png",  },
  { name: "多边形", id: CesiumPlot.SymbolType.POLYGON, imgUrl: "images/polygon.png",  },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/刘.png" },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/关.png" },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/张.png" },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/指挥部.png" },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/锚.png" },
  { name: "图片", id: CesiumPlot.SymbolType.IMG, imgUrl: "images/轮船-货轮.png",},
]);

const measurebtmlist = ref([
  {  name: "图片", id: CesiumPlot.MeasureType.DISTANCE_PROJECTION,  imgUrl: "images/距离测量.png", },
  {  name: "图片", id: CesiumPlot.MeasureType.AREA_PROJECTION,  imgUrl: "images/areameasure.png", },
  {  name: "图片", id: CesiumPlot.MeasureType.HEIGHT,  imgUrl: "images/heightmeasure.png", },
  {  name: "图片", id: CesiumPlot.MeasureType.ALTITUDE,  imgUrl: "images/Altitude.png", },
  { name: "图片", id: "ClearALL", imgUrl: "images/CLEAR.png" },

]);
onMounted(() => {
  viewer = new Cesium.Viewer("cesiumContainer", {
    contextOptions: {
    webgl: {
      antialias: true, // 开启抗锯齿
      alpha: true
    }
  },
    infoBox: false,
    //  sceneMode: Cesium.SceneMode.SCENE2D,
  });
  // 视角定位到石家庄
  viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(114, 38, 10000),
  });
  // 添加地形
  
  const terrain = new Cesium.Terrain(Cesium.CesiumTerrainProvider.fromUrl("/maps/sjzTerrain"));

  viewer.scene.setTerrain(terrain);
  plotLayer = new CesiumPlot.PlotLayer("red", viewer, {});
  plotLayer.addEventListener(
    CesiumPlot.PlotLayerEventType.DRAWEDN,
    playerDrawEnd
  );
  plotLayer.addEventListener(
    CesiumPlot.PlotLayerEventType.DRAWEDN,
    playerDrawEnd2
  );
  plotLayer.addEventListener( CesiumPlot.PlotLayerEventType.LEFTCLICK, PlotClick);
  measureLayer = new CesiumPlot.MeasureLayer("mesure", viewer, {});
  console.log(viewer);

  viewer.dataSources.add(plotLayer);
  viewer.dataSources.add(measureLayer);

  document.addEventListener("keydown", handleEnter);
});

function playerDrawEnd(plot, layer) {
  console.log(plot.getLonLats(), layer, "playerDrawEnd");
}
function playerDrawEnd2(layer, plot) {
  console.log(plot, layer, "playerDrawEnd2");
}

function PlotClick(item, plotLayer) {
  selectPlotLayer = plotLayer;
  selectPlot = item.plot;
  console.log(item, plotLayer, "PlotClick");
}

function startMeasure(item) {
  console.log(item);
  if (item.id == "ClearALL") {
    measureLayer.removeAll();
  } else {
    measureLayer.startMeasure(item.id, {});
  }
}

function createGeometry(item) {
  if (item.id == CesiumPlot.SymbolType.IMG) {
    let plot = plotLayer.createPlot(item.id, {
      imgUrl: item.imgUrl,
      style: { IMGscale: 1.5 },
    });
  } else {
    let plot = plotLayer.createPlot(item.id, {
      style: {
        lineColor: Cesium.Color.fromCssColorString("#FFff00"),
        fillColor: Cesium.Color.fromCssColorString("#FF00ff55"),
        imgColor: Cesium.Color.fromCssColorString("#0000FF"),
      },
    });
  }
}

function removeEvent() {
  plotLayer.removeEventListener(
    CesiumPlot.PlotLayerEventType.DRAWEDN,
    playerDrawEnd2
  );
}

function handleEnter(event) {
  console.log("delete", event);

  if (event.keyCode == 46 && selectPlotLayer && selectPlot) {
    selectPlotLayer.removePlot(selectPlot);
  }
}
</script>

<template>
  <div style="position: relative; display: flex">
    <div class="btndiv">
      <ul>
        <li v-for="item in btnlist" :key="item.id">
          <img :src="item.imgUrl" style="width: 32px; height: 32px" @click="createGeometry(item)" />
        </li>
      </ul>
      <ul>
        <li v-for="item in measurebtmlist" :key="item.id">
          <img :src="item.imgUrl" style="width: 32px; height: 32px" @click="startMeasure(item)" />
        </li>
      </ul>
    </div>

    <div class="btndivright">
      <button @click="removeEvent">移除事件</button>
    </div>
    <div id="cesiumContainer"></div>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.btndiv {
  position: absolute;
  display: flex;
  z-index: 999;
  height: 50px;
  width: 100%;
  background-color: darkgrey;
  z-index: 999;
}

.btndivright {
  position: absolute;
  display: flex;
  z-index: 999;
  height: 50px;
  background-color: darkgrey;
  z-index: 999;
  right: 0;
}

#cesiumContainer {
  width: 100%;
  height: 100vh;
}

ul {
  line-height: 50px;
  list-style: none;
  margin: 0;
  padding: 0;
  margin-top: 10px;
  margin-left: 10px;

  li {
    display: inline-block;
    height: 35px;
    width: 35px;
    background-color: aqua;
    line-height: 35px;
    text-align: center;
    border-radius: 5px;
    user-select: none;
    margin-right: 5px;
  }

  li:hover {
    background-color: cadetblue;
    color: #fff;
    cursor: pointer;
  }
}
</style>
